<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>{{$t('ConNetTable_network')}}</th>
          <th>{{$t('ConNetTable_IPaddress')}}</th>
          <th>{{$t('ConNetTable_gateway')}}</th>
          <th>{{$t('ConNetTable_MACaddress')}}</th>
          <th>{{$t('ConNetTable_operation')}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, key) in netWorks" :key="value.Id">
          <td>{{ key }}</td>
          <td>{{ value.IPAddress }}</td>
          <td>{{ value.Gateway }}</td>
          <td>{{ value.MacAddress }}</td>
          <td>
            <el-button type="danger" size="small" @click="removeNet(value.NetworkID)">离开网络</el-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  props: ['netWorks', 'conId'], // 接受父组件传过来的网络列表和容器id
  methods: {
    // 离开网络
    removeNet (id) {
      const data = {
        Container: this.conId,
        Force: true
      }
      const docker = `curl -w %{http_code} --unix-socket /var/run/docker.sock -s -H Content-Type:application/json -d '${JSON.stringify(data)}' "http:/v1.40/networks/${id}/disconnect"` // 将容器移出到网络 -w %{http_code}显示状态码
      post({ docker }, res => {
        if (res >= 200 && res < 300) {
          this.$message({
            showClose: true,
            message: '网络移除成功！',
            type: 'success'
          })
          this.$emit('removeSuccess') // 移除成功时告诉父组件删除成功
        } else {
          this.$message({
            showClose: true,
            message: '网络错误，请稍候重试！',
            type: 'error'
          })
        }
      }, this)
    }
  }
}
</script>

<style lang="scss" scoped>
table{
  width: calc(100% - 20px);
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  tr{
    display: flex;
    justify-content: space-around;
    width: 100%;
    th{
      flex: 1;
      line-height: 50px;
    }
    td{
      flex: 1;
      text-align: center;
      line-height: 50px;
    }
  }
  tbody{
    tr:nth-child(2n-1){
      background: #fff;
    }
  }
}
</style>
